<template>
  <div class="filter-device-container">
    <van-tree-select :items="items" :main-active-index.sync="active">
      <template #content>
        <ul v-if="active === 0">
          <li><van-cell title="开始时间" is-link :value="startTime" @click="timeStart" /></li>
          <li><van-cell title="结束时间" is-link :value="endTime" @click="timeEnd" /></li>
        </ul>
        <ul class="filter-list" v-if="active === 1">
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in typeData"
            :key="item.value"
            @click="chooseType(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon name="success" v-show="item.checked" />
          </li>
        </ul>
        <ul class="filter-list" v-if="active === 2">
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in levelData"
            :key="item.value"
            @click="chooseLevelType(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon name="success" v-show="item.checked" />
          </li>
        </ul>

        <ul class="filter-list" v-if="active === 3">
          <li
            :class="{ 'color-primary': item.checked }"
            v-for="(item, index) in statusData"
            :key="item.value"
            @click="chooseStatusType(index)"
          >
            <span>{{ item.text }}</span>
            <van-icon name="success" v-show="item.checked" />
          </li>
        </ul>
      </template>
    </van-tree-select>
    <van-popup
      v-model="timeShow"
      class="timePop"
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '45%' }"
    >
      <van-datetime-picker
        cancel-button-text="清除"
        v-model="currentDate"
        type="datetime"
        title="选择年月日小时"
        @confirm="getTime"
        @cancel="cancel"
      />
    </van-popup>
    <div class="operate-box">
      <div class="operate-btn-cancel" @click="cancelAll">取 消</div>
      <div class="operate-btn" @click="submit">确 定</div>
    </div>
  </div>
</template>

<script>
import { TreeSelect, Cell, CellGroup, DatetimePicker, Popup } from 'vant';
import dayjs from 'dayjs';

export default {
  name: 'SearchFilter',
  components: {
    [TreeSelect.name]: TreeSelect,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup
  },
  data() {
    return {
      active: 0,
      items: [{ text: '起止时间' }, { text: '报警类型' }, { text: '报警等级' }, { text: '处理进度' }],
      startTime: '点击选择',
      endTime: '点击选择',
      timeShow: false,
      timeType: 1, //判定开始时间还是结束时间
      showDateTimePicker: false,
      datetimeType: 1, //判定开始时间还是结束时间
      currentDate: new Date(),
      type: '', //类型选择
      grade: '', //报警等级选择
      status: '', //状态选择
      datetimePickerTitle: '',
      typeData: [
        {
          text: '不限',
          value: '',
          checked: false
        },
        {
          text: '报警',
          value: 1,
          checked: false
        },
        {
          text: '恢复正常',
          value: 2,
          checked: false
        }
      ],
      levelData: [
        {
          text: '一级',
          value: 1,
          checked: false
        },
        {
          text: '二级',
          value: 2,
          checked: false
        },
        {
          text: '三级',
          value: 3,
          checked: false
        },
        {
          text: '四级',
          value: 4,
          checked: false
        },
        {
          text: '五级',
          value: 5,
          checked: false
        }
      ],
      statusData: [
        {
          text: '待确认',
          value: 1,
          checked: false
        },
        {
          text: '待处理',
          value: 2,
          checked: false
        },
        {
          text: '处理中',
          value: 3,
          checked: false
        },
        {
          text: '处理完成',
          value: 5,
          checked: false
        },
        {
          text: '已恢复',
          value: 6,
          checked: false
        }
      ]
    };
  },
  methods: {
    // 选择类型
    chooseType(index) {
      if (!this.typeData[index].checked) {
        for (let i in this.typeData) {
          if (parseInt(i) === parseInt(index)) {
            this.typeData[i].checked = true;
          } else {
            this.typeData[i].checked = false;
          }
        }
        this.type = this.typeData[index].value;
      } else {
        this.typeData[index].checked = !this.typeData[index].checked;
        this.type = '';
      }
    },
    //选择级别
    chooseLevelType(index) {
      if (!this.levelData[index].checked) {
        for (let i in this.levelData) {
          if (parseInt(i) === parseInt(index)) {
            this.levelData[i].checked = true;
          } else {
            this.levelData[i].checked = false;
          }
        }
        this.grade = this.levelData[index].value;
      } else {
        this.levelData[index].checked = !this.levelData[index].checked;
        this.grade = '';
      }
    },
    //选择状态
    chooseStatusType(index) {
      if (!this.statusData[index].checked) {
        for (let i in this.statusData) {
          if (parseInt(i) === parseInt(index)) {
            this.statusData[i].checked = true;
          } else {
            this.statusData[i].checked = false;
          }
        }
        this.status = this.statusData[index].value;
      } else {
        this.statusData[index].checked = !this.statusData[index].checked;
        this.status = '';
      }
    },
    confirmFn(value) {
      let dateTime = dayjs(value).format('YYYY/MM/DD');
      if (this.datetimeType === 1) {
        this.startTime = dateTime;
      } else {
        this.endTime = dateTime;
      }
      this.showDateTimePicker = false;
    },
    // 取消时间选择
    cancelFn() {
      if (this.datetimeType === 1) {
        this.startTime = '点击选择';
      } else {
        this.endTime = '点击选择';
      }
      this.showDateTimePicker = false;
    },
    // 确定
    submit() {
      let pram = {
        beginTime: this.startTime !== '点击选择' ? dayjs(this.startTime).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: this.endTime !== '点击选择' ? dayjs(this.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
        status: this.status,
        grade: this.grade,
        type: this.type
      };

      this.$emit('submit', pram);
    },
    cancelAll() {
      this.$emit('cancel', 'false');
    },
    getTime(value) {
      this.timeShow = false;
      console.log(value);

      if (this.timeType === 1) {
        this.startTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      } else {
        this.endTime = dayjs(value).format('YYYY-MM-DD HH:mm:ss');
      }
    },
    cancel() {
      this.timeShow = false;
      if (this.timeType === 1) {
        this.startTime = '点击选择';
      } else {
        this.endTime = '点击选择';
      }
    },
    timeStart() {
      this.timeShow = true;
      this.datetimePickerTitle = '选择开始时间';
      this.timeType = 1;
    },
    timeEnd() {
      this.timeShow = true;
      this.datetimePickerTitle = '选择结束时间';
      this.timeType = 2;
    }
  }
};
</script>

<style lang="scss" scoped>
.van-cell {
  white-space: nowrap;
}
.filter-device-container {
  position: absolute;
  top: 1.22667rem !important;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;

  .van-tree-select {
    flex: 1;
  }

  ::v-deep .van-sidebar-item--select::before {
    background-color: var(--color-primary);
  }

  .filter-list {
    padding: 0.16rem 0.426667rem;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 0.32rem 0;
      border-bottom: 1px solid var(--border-color);
    }
  }

  .operate-box {
    flex-shrink: 0;
    width: 100%;
    padding: 0.213333rem 0.426667rem;
    background-color: #fff;
    position: absolute;
    bottom: 1.1rem;
    left: 0;
    display: flex;
    .operate-btn {
      display: flex;
      flex: 1;
      margin-left: 10%;
      justify-content: center;
      align-items: center;
      height: 1.066667rem;
      color: #fff;
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: var(--color-primary);
    }
    .operate-btn-cancel {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;

      height: 1.066667rem;
      color: rgb(111, 111, 111);
      font-size: 0.426667rem;
      border-radius: 0.106667rem;
      background-color: #fff;
      border: 0.026667rem solid rgb(230, 230, 230);
    }
  }
}
.van-cell__title {
  flex: 1;
}
.van-cell__value {
  flex: 3;
}
</style>
<style lang="scss">
.timePop .van-picker__cancel {
}
</style>
